<template>
    <view class="body-view1">
        <!--导航和状态栏-->
        <view class="state-navigation">
            <view class="slim_header_navigation d-flex a-center j-center">
                <view class="left_box" @tap="goBack">
                    <image src="/static/center/back.png" class="back"></image>
                </view>
                <view class="title">
                    <text class="ell">{{ planDetail?.name }}</text>
                </view>
                <view class="right_box">
                    <!-- v-if="planDetail.authorId===userData.id" -->
                    <image
                        v-if="!from"
                        @tap="openMoreActionsPopup"
                        src="/static/center/dian.png"
                        class="dian"
                    ></image>

                    <text v-if="from&&planDetail.authorId!==userData.id" @tap="goJubao" style="color:#1dc691;font-weight:600;font-size:26rpx;">举报</text>
                </view>
            </view>
        </view>
        <!-- 顶部位置占位 -->
        <view style="height: calc(100rpx + var(--status-bar-height))"></view>
        <scroll-view
            style="position:fixed;left:0;width:750rpx;top: calc(100rpx + var(--status-bar-height))"
            :scroll-y="true"
            :style="{height:calcHeight}"
            :scroll-top="scroll_top" :scroll-with-animation="true"
        >
            <view class="programme-info">
                
				<view class="info-tip" v-if="showTip">
					<view class="info-tip-content d-flex d-r a-center j-between" style="padding-right:20rpx;">
                        <text>提示：方案内容为用户提供，请谨慎鉴别使用</text>
                        <image style="width:30rpx; height:30rpx;" src="/static/nvue/close.png" mode="" @tap="tipclosed=true" />
                    </view>
				</view>
				
                <view class="info-content">


                    <view style="height: 500rpx; overflow: hidden">
                        <image
                            mode="widthFix"
                            style="width: 100%"
                            :src="planDetail?.photo"
                        ></image>
                    </view>

                    <view class="info-content-base d-flex j-between">
                        <view class="d-flex a-center">
                            <view class="content-base-title">作者：</view>
                            <view class="content-base-text">{{ planDetail.authorName}}</view>
                        </view>
                        <view class="d-flex">
                            <view class="content-base-date"
                                >{{
                                    formatDate(planDetail?.createTime)
                                }}创建</view
                            >
                        </view>
                    </view>
                    <view class="info-content-brief">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方案简介：{{
                            planDetail?.introduction
                        }}
                    </view>
                    <view class="info-content-piece d-flex j-between">
                        <view class="content-piece" style="background: #d2f4e9">
                            <view
                                class="content-piece-mark"
                                style="background: #1dc691"
                                >适用BMI</view
                            >
                            <view
                                class="content-piece-index d-flex a-center j-center"
                            >
                                <view
                                    class="piece-index-number"
                                    style="color: #1dc691"
                                    >{{ planDetail?.bmi }}</view
                                >
                            </view>
                            <view class="content-piece-describe"
                                >(我的BMI{{ BMI }})</view
                            >
                        </view>
                        <view class="content-piece" style="background: #fff1ec">
                            <view
                                class="content-piece-mark"
                                style="background: #ff9858"
                                >建议热量差</view
                            >
                            <view
                                class="content-piece-index d-flex a-center j-center"
                            >
                                <view
                                    class="piece-index-number"
                                    style="color: #ff9858"
                                >
                                    <template
                                        v-if="
                                            planDetail?.heatIsPoorStart ==
                                            planDetail?.heatIsPoorEnd
                                        "
                                        >{{
                                            planDetail?.heatIsPoorStart
                                        }}</template
                                    >
                                    <template v-else
                                        >{{ planDetail?.heatIsPoorStart }}-{{
                                            planDetail?.heatIsPoorEnd
                                        }}</template
                                    >
                                </view>
                                <view class="piece-index-unit">千卡</view>
                            </view>
                            <view class="content-piece-describe">
                                <template
                                    v-if="
                                        planDetail?.heatIsPoorStart ==
                                        planDetail?.heatIsPoorEnd
                                    "
                                    >(每周可减约{{ weightStart }}kg)</template
                                >
                                <template v-else
                                    >(每周可减约{{ weightStart }}-{{
                                        weightEnd
                                    }}kg)</template
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="programme-details">
                <view class="details-piece">
                    <view class="details-piece-title d-flex a-center">
                        <view class="piece-title-left"></view>
                        <view class="piece-title-text">推荐饮食</view>
                    </view>
                    <!--早餐-->
                    <view class="details-piece-content">
                        <view class="d-flex a-center j-between">
                            <view
                                class="piece-content-title d-flex d-c a-center j-center"
                            >
                                <i
                                    class="icon icon-zaocan"
                                    style="
                                        color: #333333;
                                        size: 40rpx;
                                        text-align: center;
                                    "
                                ></i>
                                <view class="content-title-text">早餐</view>
                            </view>
                            <view class="piece-content-table">
                                <template
                                    v-for="item in getListByType(
                                        planDetail?.userPlanDetailList,
                                        1
                                    )"
                                >
                                    <view
                                        v-if="item.show"
                                        class="content-table-row d-flex a-center j-between"
                                    >
                                        <view class="d-flex a-center">
                                            <!--
											<view class="table-row-circle"></view>
											-->
                                            <view
                                                v-if="
                                                    item.targetHeatLevel ==
                                                        '1' ||
                                                    item.targetHeatLevel == null
                                                "
                                                class="table-row-circle"
                                                style="background: #1dc691"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '2'
                                                "
                                                class="table-row-circle"
                                                style="background: #ffaf67"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '3'
                                                "
                                                class="table-row-circle"
                                                style="background: #ff5831"
                                            ></view>
                                            <view class="table-row-name">{{
                                                item.targetName
                                            }}</view>
                                        </view>
                                        <view class="d-flex">
                                            <view class="table-row-unit"
                                                >{{ item.targetHeat }}千卡/{{
                                                    item.targetQuantity
                                                }}{{ item.unit }}</view
                                            >
                                        </view>
                                    </view>
                                </template>
                                <view
                                    v-if="
                                        getListByType(
                                            planDetail?.userPlanDetailList,
                                            1
                                        ).length == 0
                                    "
                                    class="table-row-null"
                                    >暂无推荐项目～</view
                                >
                            </view>
                        </view>
                        <view
                            v-show="
                                isShowMore(planDetail?.userPlanDetailList, 1)
                                    .show
                            "
                            @tap.stop="
                                expand(planDetail?.userPlanDetailList, 1)
                            "
                            class="piece-content-more"
                            >更多(剩{{
                                isShowMore(planDetail?.userPlanDetailList, 1)
                                    .size
                            }}项)</view
                        >
                    </view>
                    <view style="height: 20rpx"></view>
                    <!--午餐-->
                    <view class="details-piece-content">
                        <view class="d-flex a-center j-center">
                            <view class="piece-content-title d-flex a-center">
                                <view class="d-flex d-c j-center">
                                    <i
                                        class="icon icon-wucan"
                                        style="
                                            color: #333333;
                                            size: 40rpx;
                                            text-align: center;
                                        "
                                    ></i>
                                    <view class="content-title-text">午餐</view>
                                </view>
                            </view>
                            <view class="piece-content-table">
                                <template
                                    v-for="item in getListByType(
                                        planDetail?.userPlanDetailList,
                                        2
                                    )"
                                >
                                    <view
                                        v-if="item.show"
                                        class="content-table-row d-flex a-center j-between"
                                    >
                                        <view class="d-flex a-center">
                                            <view
                                                v-if="
                                                    item.targetHeatLevel ==
                                                        '1' ||
                                                    item.targetHeatLevel == null
                                                "
                                                class="table-row-circle"
                                                style="background: #1dc691"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '2'
                                                "
                                                class="table-row-circle"
                                                style="background: #ffaf67"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '3'
                                                "
                                                class="table-row-circle"
                                                style="background: #ff5831"
                                            ></view>
                                            <view class="table-row-name">{{
                                                item.targetName
                                            }}</view>
                                        </view>
                                        <view class="d-flex">
                                            <view class="table-row-unit"
                                                >{{ item.targetHeat }}千卡/{{
                                                    item.targetQuantity
                                                }}{{ item.unit }}</view
                                            >
                                        </view>
                                    </view>
                                </template>
                                <view
                                    v-if="
                                        getListByType(
                                            planDetail?.userPlanDetailList,
                                            2
                                        ).length == 0
                                    "
                                    class="table-row-null"
                                    >暂无推荐项目～</view
                                >
                            </view>
                        </view>
                        <view
                            v-show="
                                isShowMore(planDetail?.userPlanDetailList, 2)
                                    .show
                            "
                            @tap.stop="
                                expand(planDetail?.userPlanDetailList, 2)
                            "
                            class="piece-content-more"
                            >更多(剩{{
                                isShowMore(planDetail?.userPlanDetailList, 2)
                                    .size
                            }}项)</view
                        >
                    </view>
                    <view style="height: 20rpx"></view>
                    <!--晚餐-->
                    <view class="details-piece-content">
                        <view class="d-flex a-center j-center">
                            <view class="piece-content-title d-flex a-center">
                                <view class="d-flex d-c j-center">
                                    <i
                                        class="icon icon-wancan"
                                        style="
                                            color: #333333;
                                            size: 40rpx;
                                            text-align: center;
                                        "
                                    ></i>
                                    <view class="content-title-text">晚餐</view>
                                </view>
                            </view>
                            <view class="piece-content-table">
                                <template
                                    v-for="item in getListByType(
                                        planDetail?.userPlanDetailList,
                                        3
                                    )"
                                >
                                    <view
                                        v-if="item.show"
                                        class="content-table-row d-flex a-center j-between"
                                    >
                                        <view class="d-flex a-center">
                                            <view
                                                v-if="
                                                    item.targetHeatLevel ==
                                                        '1' ||
                                                    item.targetHeatLevel == null
                                                "
                                                class="table-row-circle"
                                                style="background: #1dc691"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '2'
                                                "
                                                class="table-row-circle"
                                                style="background: #ffaf67"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '3'
                                                "
                                                class="table-row-circle"
                                                style="background: #ff5831"
                                            ></view>
                                            <view class="table-row-name">{{
                                                item.targetName
                                            }}</view>
                                        </view>
                                        <view class="d-flex">
                                            <view class="table-row-unit"
                                                >{{ item.targetHeat }}千卡/{{
                                                    item.targetQuantity
                                                }}{{ item.unit }}</view
                                            >
                                        </view>
                                    </view>
                                </template>
                                <view
                                    v-if="
                                        getListByType(
                                            planDetail?.userPlanDetailList,
                                            3
                                        ).length == 0
                                    "
                                    class="table-row-null"
                                    >暂无推荐项目～</view
                                >
                            </view>
                        </view>
                        <view
                            v-show="
                                isShowMore(planDetail?.userPlanDetailList, 3)
                                    .show
                            "
                            @tap.stop="
                                expand(planDetail?.userPlanDetailList, 3)
                            "
                            class="piece-content-more"
                            >更多(剩{{
                                isShowMore(planDetail?.userPlanDetailList, 3)
                                    .size
                            }}项)</view
                        >
                    </view>
                    <view style="height: 20rpx"></view>
                    <!--加餐-->
                    <view class="details-piece-content">
                        <view class="d-flex a-center j-center">
                            <view class="piece-content-title d-flex a-center">
                                <view class="d-flex d-c j-center">
                                    <i
                                        class="icon icon-jiacan"
                                        style="
                                            color: #333333;
                                            size: 40rpx;
                                            text-align: center;
                                        "
                                    ></i>
                                    <view class="content-title-text">加餐</view>
                                </view>
                            </view>
                            <view class="piece-content-table">
                                <template
                                    v-for="item in getListByType(
                                        planDetail?.userPlanDetailList,
                                        4
                                    )"
                                >
                                    <view
                                        v-if="item.show"
                                        class="content-table-row d-flex a-center j-between"
                                    >
                                        <view class="d-flex a-center">
                                            <view
                                                v-if="
                                                    item.targetHeatLevel ==
                                                        '1' ||
                                                    item.targetHeatLevel == null
                                                "
                                                class="table-row-circle"
                                                style="background: #1dc691"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '2'
                                                "
                                                class="table-row-circle"
                                                style="background: #ffaf67"
                                            ></view>
                                            <view
                                                v-if="
                                                    item.targetHeatLevel == '3'
                                                "
                                                class="table-row-circle"
                                                style="background: #ff5831"
                                            ></view>
                                            <view class="table-row-name">{{
                                                item.targetName
                                            }}</view>
                                        </view>
                                        <view class="d-flex">
                                            <view class="table-row-unit"
                                                >{{ item.targetHeat }}千卡/{{
                                                    item.targetQuantity
                                                }}{{ item.unit }}</view
                                            >
                                        </view>
                                    </view>
                                </template>
                                <view
                                    v-if="
                                        getListByType(
                                            planDetail?.userPlanDetailList,
                                            4
                                        ).length == 0
                                    "
                                    class="table-row-null"
                                    >暂无推荐项目～</view
                                >
                            </view>
                        </view>
                        <view
                            v-show="
                                isShowMore(planDetail?.userPlanDetailList, 4)
                                    .show
                            "
                            @tap.stop="
                                expand(planDetail?.userPlanDetailList, 4)
                            "
                            class="piece-content-more"
                            >更多(剩{{
                                isShowMore(planDetail?.userPlanDetailList, 4)
                                    .size
                            }}项)</view
                        >
                    </view>
                    <view style="height: 70rpx;border-bottom: 2rpx #F5F5F5 solid;"></view>
					<!--推荐运动-->
					<view class="details-piece-title d-flex a-center">
					    <view class="piece-title-left"></view>
					    <view class="piece-title-text">推荐运动</view>
					</view>
					<!--
					<view class="content-table-null">暂无推荐项目～</view>
					-->
					<view class="content-table-sports">
					    <template
					        v-for="item in getListByType(
					            planDetail?.userPlanDetailList,
					            6
					        )"
					    >
					        <view
					            v-if="item.show"
					            class="list-right-row d-flex a-center j-between"
					        >
					            <view class="d-flex a-center">
					                <image
					                    v-if="item.targetHeatLevel == '1'"
					                    style="width: 30rpx; height: 30rpx"
					                    src="@/static/image/fire-3.png"
					                ></image>
					                <image
					                    v-if="item.targetHeatLevel == '2'"
					                    style="width: 30rpx; height: 30rpx"
					                    src="@/static/image/fire-2.png"
					                ></image>
					                <image
					                    v-if="item.targetHeatLevel == '3'"
					                    style="width: 30rpx; height: 30rpx"
					                    src="@/static/image/fire-1.png"
					                ></image>
					                <!--
									<view class="right-row-circle"></view>
									-->
					                <view class="right-row-name">{{
					                    item.targetName
					                }}</view>
					            </view>
					            <view class="right-row-unit d-flex a-center"
					                >{{ item.targetHeat }}千卡/{{ item.time
					                }}{{ item.unit }}</view
					            >
					        </view>
					    </template>
					    <view
					        v-if="
					            getListByType(planDetail?.userPlanDetailList, 6)
					                .length == 0
					        "
					        class="table-row-null"
					        >暂无推荐项目～</view
					    >
					    <view
					        v-show="
					            isShowMore(planDetail?.userPlanDetailList, 6)
					                .show
					        "
					        @tap.stop="
					            expand(planDetail?.userPlanDetailList, 6)
					        "
					        class="piece-content-more"
					        >更多(剩{{
					            isShowMore(planDetail?.userPlanDetailList, 6)
					                .size
					        }}项)</view
					    >
					</view>
                </view>
            </view>
            <view class="programme-details">
                <view class="details-piece">
                    <view class="piece-water-title d-flex a-center">
                        <image
                            style="width: 40rpx; height: 40rpx"
                            src="@/static/image/cup.png"
                        ></image>
                        <view class="water-title-text">饮水</view>
                    </view>
                    <view class="piece-water-describe"
                        >充足的饮水是减肥过程中重要的组成环节，除身体有特殊情况不能过多饮水外，按照轻盈推荐的饮水量执行即可。</view
                    >
                </view>
            </view>
        </scroll-view>
        <view class="bottom-btn d-flex d-c j-between">
            <view
                class="d-flex d-c a-center j-center"
                v-if="from !== 'group' && planDetail?.inUse == 0"
            >
                <view
                    v-if="planDetail.isUpdate"
                    @tap="goOld"
                    style="font-size: 24rpx; color: #666; margin-bottom: 10rpx"
                    >原作者更新了方案，<text
                        style="color: #1dc691; text-decoration: underline"
                        >点此查看</text
                    ></view
                >
                <tm-button
                    _style="margin: 0;font-weight: 600;"
                    :width="690"
                    :height="80"
                    :shadow="-1"
                    round="5"
                    :linear-color="['#64F1C5', '#29DBA3']"
                    linear="left"
                    :fontSize="32"
                    fontColor="#ffffff"
                    @tap="confirmPopup.open('bottom')"
                    label="使用此方案"
                ></tm-button>
            </view>

            <tm-button
                v-if="from !== 'group' && planDetail?.inUse == 1"
                _style="margin: 0;font-weight: 600;"
                :width="690"
                :height="80"
                :shadow="-1"
                round="5"
                :linear-color="['#FFA24A', '#FF824F']"
                linear="left"
                :fontSize="32"
                fontColor="#ffffff"
                @tap="cancelPopup.open('bottom')"
                label="方案使用中"
            ></tm-button>

            <tm-button
                v-if="
                    from === 'group' &&
                    !planDetail.isUpdate &&
                    planDetail.isRelay !== 1
                "
                _style="margin: 0;font-weight: 600;"
                :width="690"
                :height="80"
                :shadow="-1"
                round="5"
                :linear-color="['#64F1C5', '#29DBA3']"
                linear="left"
                :fontSize="32"
                fontColor="#ffffff"
                @tap="RelayPlan(false)"
                label="转存为我的方案"
            ></tm-button>

            <tm-button
                v-if="
                    from === 'group' &&
                    !planDetail.isUpdate &&
                    planDetail.isRelay === 1
                "
                _style="margin: 0;font-weight: 600;"
                :width="690"
                :height="80"
                :shadow="-1"
                round="5"
                :linear-color="['#FFA24A', '#FF824F']"
                linear="left"
                :fontSize="32"
                fontColor="#ffffff"
                :label="planHadupdate?'已更新':'已转存'"
            ></tm-button>

            <view
                class="d-flex d-c a-center j-center"
                v-if="from === 'group' && planDetail.isUpdate"
            >
                <view
                    style="
                        font-size: 24rpx;
                        color: #1dc691;
                        margin-bottom: 10rpx;
                    "
                    >方案有更新</view
                >
                <tm-button
                    _style="margin: 0;font-weight: 600;"
                    :width="690"
                    :height="80"
                    :shadow="-1"
                    round="5"
                    :linear-color="['#64F1C5', '#29DBA3']"
                    linear="left"
                    :fontSize="32"
                    fontColor="#ffffff"
                    @tap="updataPopup.open()"
                    label="更新我的转存"
                ></tm-button>
            </view>

            <view class="heightBox"></view>

            <!--
			<tm-button
			    _style="margin: 0;font-weight: 600;"
			    :width="236"
			    :height="80"
			    :shadow="-1"
				:outlined="true"
				icon=""
				color="#1DC691"
			    round="5"
			    :fontSize="32"
			    fontColor="#1DC691"
			>
			<i class="icon icon-aixin" style="font-size: 40rpx;"></i>
			<text>收藏</text>
			</tm-button>
			-->
        </view>
        <!--更多操作-->
        <uni-popup ref="moreActionsPopup" :safe-area="false">
            <view class="popup-content">
                <view style="height: 20rpx"></view>
                <view class="top-frame-item">
                    <view class="frame-item-title d-flex a-center">
                        <view class="item-title-left"></view>
                        <view class="item-title-text">允许转存</view>
                    </view>
                    <view class="content-row d-flex a-center j-between">
                        <view class="row-text">所有人</view>
                        <tm-switch
                            linear="left"
                            linearDeep="accent"
                            v-model="isAll"
                            :defaultValue="isAll"
                            @change="changeAll"
                            color="rgba(15, 95, 70, 0.30)"
                            :barColor="
                                isAll
                                    ? 'rgba(35, 226, 166, 1)'
                                    : 'rgba(195, 204, 202, 1)'
                            "
                            barIcon=""
                            size="normal"
                        ></tm-switch>
                    </view>
                    <view class="content-row d-flex a-center j-between">
                        <view class="row-text">仅群友</view>
                        <tm-switch
                            linear="left"
                            linearDeep="accent"
                            v-model="isFriend"
                            :defaultValue="isFriend"
                            @change="changeFriend"
                            color="rgba(15, 95, 70, 0.30)"
                            :barColor="
                                isFriend
                                    ? 'rgba(35, 226, 166, 1)'
                                    : 'rgba(195, 204, 202, 1)'
                            "
                            barIcon=""
                            size="normal"
                        ></tm-switch>
                    </view>
                    <view
                        class="content-row-release d-flex a-center j-between"
                        style="border-bottom: 2rpx solid #f5f5f5"
                        v-if="planDetail.authorId===userData.id"
                    >
                        <view>
                            <view class="d-flex d-c j-center">
                                <view class="row-release-title d-flex a-center">
                                    <view class="release-title-left"></view>
                                    <view class="release-title-text"
                                        >发布到</view
                                    >
                                    <view class="release-title-plan"
                                        >【计划-方案广场】</view
                                    >
                                </view>
                                <view class="row-release-explain"
                                    >(可被平台所有胖友看到)</view
                                >
                            </view>
                        </view>
                        <view>
                            <tm-switch
                                linear="left"
                                linearDeep="accent"
                                v-model="isSquare"
                                :defaultValue="isSquare"
                                @change="changeSquare"
                                color="rgba(15, 95, 70, 0.30)"
                                :disabled="disabledSquare"
                                @click="clickSquare"
                                :barColor="
                                    isSquare
                                        ? 'rgba(35, 226, 166, 1)'
                                        : 'rgba(195, 204, 202, 1)'
                                "
                                barIcon=""
                                size="normal"
                            ></tm-switch>
                        </view>
                    </view>
                    <view class="content-row-release d-flex a-center">
                        <view
                            @tap="goEditProgramme"
                            class="row-release-cell d-flex d-c a-center j-center"
                        >
                            <i
                                class="icon icon-bianji"
                                style="font-size: 60rpx; color: #333333"
                            ></i>
                            <view class="release-cell-text">编辑</view>
                        </view>
                        <view
                            @tap="delPopup.open('bottom')"
                            class="row-release-cell d-flex d-c a-center j-center"
                        >
                            <i
                                class="icon icon-shanchu1"
                                style="font-size: 60rpx; color: #333333"
                            ></i>
                            <view class="release-cell-text">删除</view>
                        </view>
                        <view
                            @tap="share"
                            class="row-release-cell d-flex d-c a-center j-center"
                        >
                            <i
                                class="icon icon-fenxiang1"
                                style="font-size: 60rpx; color: #333333"
                            ></i>
                            <view class="release-cell-text">分享</view>
                        </view>
                    </view>
                </view>
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="moreActionsPopup.close()"
                    >取消</view
                >
            </view>
        </uni-popup>
        <!--删除控件-->
        <uni-popup ref="delPopup" :safe-area="false">
            <view class="sys-confirm-content">
                <view class="confirm-content-title">确认删除此方案吗？</view>
                <!--
				<view class="confirm-content-tip">
					<view class="content-tip-row"  style="color: #1DC691;">该方案的饮食和运动将显示在饮食和运动项的首位。</view>
				</view>
				-->
                <view
                    @tap="delPlan"
                    class="content-button button-confirm"
                    style="color: #fd5745"
                    >删除</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="delPopup.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>
        </uni-popup>
        <uni-popup ref="confirmPopup" :safe-area="false">
            <view class="sys-confirm-content">
                <view class="confirm-content-title">确认使用此方案？</view>
                <view class="confirm-content-tip">
                    <view class="content-tip-row" style="color: #1dc691"
                        >该方案的饮食和运动将显示在饮食和运动项的首位。</view
                    >
                </view>
                <view
                    @tap="submit"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="confirmPopup.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>
        </uni-popup>
        <!--取消控件-->
        <uni-popup ref="cancelPopup" :safe-area="false">
            <view class="sys-confirm-content">
                <view class="confirm-content-title">确认取消使用该方案？</view>
                <view class="confirm-content-tip">
                    <view class="content-tip-row" style="color: #cc3300"
                        >该方案的内容将从饮食和运动选项中移除</view
                    >
                </view>
                <view
                    @tap="cancel"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="cancelPopup.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>
        </uni-popup>

        <uni-popup ref="updataPopup" type="bottom" :safe-area="false">
            <view class="sys-confirm-content">
                <view class="confirm-content-title">确认更新？</view>
                <view class="confirm-content-tip">
                    <view class="content-tip-row" style="color: #1dc691"
                        >更新将覆盖您之前转存的方案内容</view
                    >
                </view>
                <view
                    @tap="RelayPlan(true)"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="updataPopup.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>
        </uni-popup>
    </view>

    <uni-popup ref="dialog_popup" type="center" background-color="transparent">
        

        <view @click.stop="" class="sheet psr">
            <view>
                <view class="top">{{dialogTitle}}</view>
                <view class="mes"> 您可在[我的方案中]查看并使用 </view>
            </view>
            <view style="height: 120rpx; margin-top: 100rpx">
                <view class="btn">
                    <view class="tongyi" @tap="goMy">去查看</view>
                </view>
            </view>
            <image
                src="/static/userinfo/guanbi.png"
                class="guanbi w-center"
                @click="dialog_popup.close()"
            ></image>
        </view>
    </uni-popup>

    <!-- <tm-overlay
            v-model:show="dialogVisible"
            contentAnimation
            style="border-radius: 20rpx"
            @close="close"
        >
            <view @click.stop="" class="sheet psr">
                <tm-sheet :width="540" style="border-radius: 20rpx; padding: 0">
                    <view style="height: 200rpx">
                        <view class="top">转存成功</view>
                        <view class="mes">
                            您可在[我的方案中]查看并使用
                        </view>
                    </view>
                    <view style="height: 120rpx; margin-top: 100rpx">
                        <view class="btn">
                            <view class="tongyi" @tap="goMy">去查看</view>
                        </view>
                    </view>
                    <image src="/static/userinfo/guanbi.png" class="guanbi w-center" @click="dialogVisible=false"></image>

                </tm-sheet>
            </view>
        </tm-overlay> -->
    <needvip ref="needVipPopup" :title="needVipTitle" :desp="needVipDesp" :btntext="needVipBtnText"></needvip>

    <statement></statement>
</template>

<script setup lang="tsx" name="programmeDetails">
import { ref,computed, nextTick } from "vue";
import { onLoad, onShow,onPageScroll} from "@dcloudio/uni-app";
import {
    getUserPlanDetail,
    getUserDetail,
    updateUserPlan,
    delUserPlan,
    useUserPlan,
    getBodyInfo,
    relayPlan,
} from "@/api/api";
import moment from "moment";
import { userData as userDataStore } from "@/store/userData";
import BigNumber from "bignumber.js";
import statement from "@/components/statement.vue";
import needvip from "@/components/needvip.vue";


const scroll_top = ref(1);

const calcHeight = computed(()=>{
    let h = 150
    if(planDetail.value.isUpdate){
        h=190;
    }
    return `calc(100vh - 100rpx - var(--status-bar-height) - ${h}rpx)`;
})


onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if(res.scrollTop===0){
        backTop();
        setTimeout(()=>{
            uni.pageScrollTo({scrollTop:100});
        },100)
    }
});


const backTop = ()=>{
    scroll_top.value = 1;
    nextTick(()=>{
        scroll_top.value = 0;
    })
}


const dialog_popup = ref(null);
const dialogVisible = ref(false);

const tipclosed = ref(false);

const showTip = computed(()=>{
    if(tipclosed.value){
        return false;
    }

    if(planDetail.value.authorId!==userData.id){
        return true;
    }
})

const goJubao =()=>{

    uni.navigateTo({
        url: `/pages/complaint/complaint?targetId=${planId.value}&target=userPlan&name=${planDetail.value.name}`,
    });
}

const from = ref("");

const userData: any = userDataStore();
const goBack = () => {
    uni.navigateBack();
};
const goOld = () => {
    const id = planDetail.value.sourcePlanId;
    uni.navigateTo({
        url: `/pages/programmeDetails/programmeDetails?programmeId=${id}&from=group`,
    });
};
const planDetail = ref({});
const BMI = ref(0);
const weightStart = ref(); //减重开始
const weightEnd = ref(); //减重开始
const planId = ref(null);
onLoad((options: any) => {

    setTimeout(() =>{
        uni.pageScrollTo({scrollTop:100});
    },100)

    if (options.from) {
        from.value = options.from;
    }
    planId.value = options.programmeId;
    //GetUserPlanDetail(options.programmeId);
});

onShow((options: any) => {
    GetUserPlanDetail(planId.value);
});

const goMy = () => {
    dialog_popup.value.close();
    uni.navigateTo({
        url: `/pages/programme/programme`,
    });
};



const planHadupdate = ref(false);
const needVipPopup = ref(null);
const needVipTitle = ref('');
const needVipDesp = ref('');
const needVipBtnText = ref('');
const dialogTitle = ref('转存成功');


const RelayPlan = async (isupdate:boolean) => {

    if(userData.isVip<1){
        needVipTitle.value = '转存方案'
        needVipDesp.value = '成为VIP即可转存方案。'
        needVipBtnText.value = '开通VIP'
        needVipPopup.value.open();
        return;
    }

    if(isupdate){
        dialogTitle.value = '已更新';
    }else{
        dialogTitle.value = '转存成功';
    }



    updataPopup.value.close();
    const params = {
        id: planDetail.value.id,
    };
    const res = await relayPlan(params);
    const { flag, message } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: message || "转存失败",
            duration: 1500,
        });
        return;
    }
    dialog_popup.value.open();
    if(isupdate){
        planHadupdate.value = true;
    }
    GetUserPlanDetail(planId.value);
};

const updataPopup = ref(null);


const share = ()=>{
    uni.navigateTo({
        url: `/pages/programme/shareProgramme?id=${planId.value}`,
    });
}

const GetUserPlanDetail = (id: string) => {
    const params = {
        id,
        detailType: from.value === "group" ? 1 : 2,
    };

    getUserPlanDetail(params).then((res: any) => {
        if (res.success) {
            planDetail.value = res.data;

            console.log('params');
            console.log(params);

            console.log('res');
            console.log(res);

            console.log('planId.value');
            console.log(planId.value);

            console.log('idididid');
            console.log(id);

            console.log('getUserPlanDetail');
            console.log(planDetail.value);


            let breakfastList = planDetail.value.userPlanDetailList.filter(
                (item: any) => item.type === 1
            );
            //console.log(breakfastList)
            setShow(breakfastList);
            let lunchList = planDetail.value.userPlanDetailList.filter(
                (item: any) => item.type === 2
            );
            setShow(lunchList);
            let dinnerList = planDetail.value.userPlanDetailList.filter(
                (item: any) => item.type === 3
            );
            setShow(dinnerList);
            let addFoodList = planDetail.value.userPlanDetailList.filter(
                (item: any) => item.type === 4
            );
            setShow(addFoodList);
            let sportsList = planDetail.value.userPlanDetailList.filter(
                (item: any) => item.type === 6
            );
            //console.log(sportsList)
            setShow(sportsList);
            countSwitchState();
            getAuthor(planDetail.value.userId);
            disabledSquare.value = !availableSquare();

            //计算BMI
            getBodyInfo({ userId: userData.id }).then((ress: any) => {
                if (ress.success) {
                    let weight = ress.data?.userWeightRecord?.weight;
                    let stature = ress.data?.userHealth?.stature;
                    //计算体质指数
                    if (stature !== null && weight != null) {
                        let m = new BigNumber(stature).div(new BigNumber(100));
                        BMI.value = Number(
                            new BigNumber(weight)
                                .div(m.times(m))
                                .toNumber()
                                .toFixed(1)
                        );
                    }
                    weightStart.value = (
                        ((res.data.heatIsPoorStart + ress.data.rest * 0.25) /
                            7.7 /
                            1000) *
                        7
                    ).toFixed(2);
                    weightEnd.value = (
                        ((res.data.heatIsPoorEnd + ress.data.rest * 0.25) /
                            7.7 /
                            1000) *
                        7
                    ).toFixed(2);
                }
            });
        }
    });
};

const availableSquare = () => {
    let foodType = 0;
    if (
        planDetail.value.userPlanDetailList.filter(
            (item: any) => item.type === 1
        ).length == 0
    )
        foodType++;
    if (
        planDetail.value.userPlanDetailList.filter(
            (item: any) => item.type === 2
        ).length == 0
    )
        foodType++;
    if (
        planDetail.value.userPlanDetailList.filter(
            (item: any) => item.type === 3
        ).length == 0
    )
        foodType++;
    if (
        planDetail.value.userPlanDetailList.filter(
            (item: any) => item.type === 4
        ).length == 0
    )
        foodType++;
    let foodNumber = 0;
    foodNumber += planDetail.value.userPlanDetailList.filter(
        (item: any) => item.type === 1
    ).length;
    foodNumber += planDetail.value.userPlanDetailList.filter(
        (item: any) => item.type === 2
    ).length;
    foodNumber += planDetail.value.userPlanDetailList.filter(
        (item: any) => item.type === 3
    ).length;
    foodNumber += planDetail.value.userPlanDetailList.filter(
        (item: any) => item.type === 4
    ).length;
    if (foodType >= 3 || foodNumber < 10) {
        return false;
    }
    return true;
};
const clickSquare = () => {
    if (disabledSquare.value) {
        uni.showToast({
            icon: "none",
            title: "您的方案过于简略，无法发布到方案广场",
            duration: 1500,
        });
    }
};
const formatDate = (date: string) => {
    if (date == null || date == "") return "";
    return moment(date).format("YYYY/MM/DD HH:mm");
};
const author = ref();
const getAuthor = (userId: string) => {
    getUserDetail({ id: userId }).then((res: any) => {
        if (res.success) {
            author.value = res.data.nickName;
        }
    });
};
//设置超过五个影藏
const setShow = (list: any) => {
    list.forEach((res: any, index: number) => {
        if (index < 5) {
            res.show = true;
        } else {
            res.show = false;
        }
    });
};
const getListByType = (list: any, type: number) => {
    //console.log(list)
    if (list == null) return {};
    return list.filter((item: any) => item.type === type);
};
//判断是否显示更多
const isShowMore = (list: any, type: number) => {
    let json = {
        show: false,
        size: 0,
    };
    if (list == null) return json;
    //console.log(list)
    let results: any = list.filter(
        (item: any) => item.type == type && item.show == false
    );
    if (results.length > 0) {
        json.show = true;
        json.size = results.length;
    }
    return json;
};
//展开
const expand = (list: any, type: number) => {
    if (list == null) return;
    let results: any = list.filter(
        (item: any) => item.type === type && !item.show
    );
    results.forEach((res: any) => {
        res.show = true;
    });
};
//打开更多操作
const moreActionsPopup = ref();
const openMoreActionsPopup = () => {
    moreActionsPopup.value.open("bottom");
};
//设置底部开关值
const isAll = ref(true); //是否所有人可转存
const isFriend = ref(false); //是否只有朋友群可转存
const isSquare = ref(true); //是否发布到广场
const changeAll = (e: any) => {
    if (e) isFriend.value = false;
    isAll.value = e;
    countSwitchValue();
    updatePlan();
    //console.log(planDetail.value)
    return e;
};
const changeFriend = (e: any) => {
    if (e) isAll.value = false;
    isFriend.value = e;
    countSwitchValue();
    updatePlan();
    //console.log(planDetail.value);
    return e;
};
const disabledSquare = ref(true);
const changeSquare = (e: any) => {
    isSquare.value = e;
    countSwitchValue();
    //console.log(planDetail.value);
    updatePlan();
    return e;
};
//根据开关状态设置值
const countSwitchValue = () => {
    if (!isAll.value && !isFriend.value) planDetail.value.relayStatus = 0;
    if (isAll.value) planDetail.value.relayStatus = 1;
    if (isFriend.value) planDetail.value.relayStatus = 2;
    if (isSquare.value) {
        planDetail.value.isPublic = 1;
    } else {
        planDetail.value.isPublic = 0;
    }
    //console.log(formData.value)
};
//根据值设置开关状态
const countSwitchState = () => {
    if (planDetail.value.relayStatus == 0) {
        isAll.value = false;
        isFriend.value = false;
    }
    if (planDetail.value.relayStatus == 1) {
        isAll.value = true;
        isFriend.value = false;
    }
    if (planDetail.value.relayStatus == 2) {
        isAll.value = false;
        isFriend.value = true;
    }
    if (planDetail.value.isPublic == 1) {
        isSquare.value = true;
    }
    if (planDetail.value.isPublic == 0) {
        isSquare.value = false;
    }
};
//保存编辑
const updatePlan = () => {
    updateUserPlan(planDetail.value).then((res: any) => {
        if (!res.success) {
            console.log(res.message);
        }
    });
};
//删除方案
const delPopup = ref();
const delPlan = () => {
    delUserPlan(planDetail.value).then((res: any) => {
        if (res.success) {
            uni.navigateBack({
                success: () => {
                    uni.showToast({
                        icon: "none",
                        title: "删除成功",
                        duration: 1500,
                    });
                },
            });
        }
    });
};
const goEditProgramme = () => {
    uni.navigateTo({
        url: `/pages/programmeCreate/programmeCreate?data=${JSON.stringify(
            planDetail.value
        )}`,
    });
};
const submit = () => {
    useUserPlan({
        id: planDetail.value.id,
        userId: planDetail.value.userId,
        inUse: 1,
    }).then((res: any) => {
        if (res.success) {
            confirmPopup.value.close();
            GetUserPlanDetail(planId.value);
            uni.showToast({
                icon: "none",
                title: "使用中",
                duration: 1500,
            });
            /*
			uni.navigateTo({
			    url: `/pages/programme/programme`,
			});
			*/
        }
    });
};
const confirmPopup = ref();
const cancelPopup = ref();
const cancel = () => {
    useUserPlan({
        id: planDetail.value.id,
        userId: planDetail.value.userId,
        inUse: 0,
    }).then((res: any) => {
        if (res.success) {
            cancelPopup.value.close();
            GetUserPlanDetail(planId.value);
            uni.showToast({
                icon: "none",
                title: "已取消",
                duration: 1500,
            });
            /*
			uni.navigateTo({
			    url: `/pages/programme/programme`,
			});
			*/
        }
    });
};
</script>

<style lang="scss" scoped>
@import "./programmeDetails.scss";
.body-view1{
    width: 750rpx;
    height: calc(100vh + 1px);
}
.sheet {
    border-radius: 20rpx;
    width: 580rpx;
    height:400rpx;
    background:#fff;

    .top {
        width: 100%;
        height: 124rpx;
        background: linear-gradient(0, #ffffff 0%, #baf3da 100%, #cbf7e4 100%);
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        text-align: center;
        padding-top: 29rpx;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
    }

    .fufei {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1dc691;
        text-align: center;
        margin-top: 20rpx;
    }

    .mes {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        padding: 0 40rpx;
        line-height: 50rpx;

        .mes-name {
            font-size: 30rpx;
            color: #333333;
            margin-right: 10rpx;
        }
    }

    .laiyuan {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        text-align: center;
        margin: 22rpx 0 0 0;

        .from {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-right: 16rpx;
        }
    }

    .info {
        width: 420rpx;
        background: #f5f5f5;
        border-radius: 10rpx;
        margin: 20rpx auto;
        display: flex;

        flex-wrap: wrap;
        padding: 3rpx;
        box-sizing: border-box;
        padding: 20rpx;
        min-height: 200rpx;

        text {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            font-size: 28rpx;
        }
    }

    .btn {
        width: 460rpx;
        margin: 0 auto;

        .tongyi {
            width: 100%;
            height: 80rpx;
            background: linear-gradient(120deg, #29dba3 0%, #64f1c5 100%);
            border-radius: 20rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
            line-height: 80rpx;
        }

        .jujue {
            margin-top: 20rpx;
            width: 100%;
            height: 80rpx;
            border-radius: 20rpx;
            border: 2rpx solid #cccccc;
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #999999;
            text-align: center;
            line-height: 80rpx;
        }
    }

    .types {
        width: 100%;
        height: 120rpx;

        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .tongyi {
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1dc691;
        }

        .jujue {
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }

    .guanbi {
        width: 52rpx;
        height: 52rpx;
        bottom: -100rpx;
    }
}
</style>